<script setup lang="ts">
  // import HelloWorld from './components/HelloWorld.vue'
  import { reactive } from 'vue'
  import type { IUser } from '/#/user'
  import HelloWorld from '/@/components/HelloWorld.vue'

  const user = reactive<IUser>({
    name: '唔西迪西',
    age: 18,
    hobby: ['唱', '跳', 'rap', '篮球']
  })
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <p>
    我叫{{ user.name }}，今年 {{ user.age }} 岁，我的爱好是：
    {{ user.hobby.join('，') }}
  </p>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped lang="less">
  .logo {
    height: 6em;
    padding: 1.5em;
    transition: filter 300ms;
    will-change: filter;
  }

  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }

  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>
